<template>
  <div class="subject">
    <span>{{num1}}</span>
    <span>+</span>
    <span>{{num2}}</span>
    <span>=</span>
    <input type="number" v-model.number="sum" :disabled='bbb' />
    <!-- 第一点错误  把按钮禁用写给给了提交按钮-->
    <button @click="btn">提交</button>
  </div>
</template>

<script>
  export default {

    props: ['index'],
    data() {

      return {
        sum: 'null',
        // num3: 0,
        bbb: false,
        num1: Math.floor(Math.random() * 10),
        num2: Math.floor(Math.random() * 10),
      }
    },
    methods: {
      btn() {
        this.bbb = true
        let sum = ((this.num1 + this.num2) == this.sum) ? '正确' : '错误';
        this.$emit("tijiao", sum, this.index)
        // if (this.sum == this.num1 + this.num2) {
        //   this.num3 = 1
        //   console.log(1);
        // } else {
        //   console.log(2);
        //   this.num3 = 2
        // }



      }
    }
  };
</script>

<style scoped>
  .subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
  }

  .subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
  }

  .subject input {
    width: 50px;
    height: 20px;
  }
</style>